import React, { Component } from 'react';
import { findFilmsPage } from '@/api/MaiZuo';

import Child from './Child';

import './css/index.css';

export default class App extends Component {
  state = {
    list: [],
    index: 0,
  };

  componentDidMount() {
    findFilmsPage().then((res) => {
      console.log('films', res);

      this.setState({
        list: res.films,
      });
    });
  }

  render() {
    return (
      <div>
        <input
          type='number'
          value={this.state.index}
          onChange={(evt) => this.setState({ index: Number(evt.target.value) })}
        />

        <ul className='list'>
          {this.state.list.map((item, index) => {
            return (
              <Child
                key={item.filmId}
                active={this.state.index === index}
                {...item}></Child>
            );
          })}
        </ul>
      </div>
    );
  }
}
